import React, { useEffect, useState } from 'react'
import { Button, Input, Space, Table, Tag } from 'antd';
import request from '../../api/request';
import Top from './components/Top';
import Search from 'antd/es/transfer/search';
import {UndoOutlined} from '@ant-design/icons';

function Index() {
  const [data, setData] = useState([])

  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [count, setCount] = useState(0)

  const getData = () => {
    request.get('/api/article/list', {
      params: {
        page,
        pageSize
      }
    }).then((res) => {
      console.log(res);
      setData(res.data.rows)
      setCount(res.data.count)
    })
  }
  useEffect(() => {
    getData()
  }, [page, pageSize])

// 搜索
const { Search } = Input;

const onSearch=(value)=>{
  setCzs(value)
  request.get('/api/article/list',{
    params:{
      keyword:value
    }
  }).then((res)=>{
    console.log(res);
    setData(res.data.rows)
    setCount(res.data.count)
    // setCzs(value)
  })
}


// 重置
const [czs,setCzs]=useState('')
const cz=()=>{
  setPage(1)
  setPageSize(10)
  getData()
  setCzs('')
}


  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
    },
    {
      title: '文章内容',
      dataIndex: 'content',
      key: 'content',
    },
    {
      title: '浏览量',
      dataIndex: 'viewCount',
      key: 'viewCount',
    },
    {
      title: '更新时间',
      dataIndex: 'updatedAt',
      key: 'updatedAt',
    },
    {
      title: '标签',
      key: 'tags',
      dataIndex: 'tags',
      render: (_, { tags }) => (
        <>
          {tags.map((tag) => {
            return (
              <Tag key={tag.name}>
                {tag.name.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button color="primary" variant="solid" >查看</Button>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <span>
        <Top />
        <Button color="primary" variant="solid" >+新建</Button>&emsp;
        <Search
          placeholder="请输入要查询的内容"
          allowClear
          style={{width:200}}
          enterButton="查询"
          size="large"
          onSearch={onSearch}
        />
        <Button onClick={cz}><UndoOutlined />重置</Button>
      </span>

      <Table columns={columns} dataSource={data}
        pagination={
          {
            total: count,
            showSizeChanger: true,
            showQuickJumper: true,
            onChange: (page, pageSize) => {
              setPage(page)
              setPageSize(pageSize)
            },
            showTotal: (total) => `Total ${total} items`
          }
        }

      />
    </div>
  )
}

export default Index
